<include file="Public/min-header" />
<link href="__PUBLIC__/plugins/daterangepicker/daterangepicker-bs3.css" rel="stylesheet" type="text/css" />
<script src="__PUBLIC__/plugins/daterangepicker/moment.min.js" type="text/javascript"></script>
<script src="__PUBLIC__/plugins/daterangepicker/daterangepicker.js" type="text/javascript"></script>
<style>
	th{text-align: center;} 
</style>
<div class="wrapper">
    <include file="Public/breadcrumb"/>
		<section class="content">
		  <div class="row">
		  	<div class="col-md-12">
		  		<div class="box box-info">
		  			<div class="box-header with-border">
		  				<div class="row"> 
		  					<div class="col-md-10">
		  						<form action="/Admin/Report/liulan" method="post" class="navbar-form form-inline">
				  					<div class="col-xs-6" style="width:510px;padding:0px;">
					                    <div class="input-group margin">
											<div class="input-group-addon">
											    选择时间<i class="fa fa-calendar"></i>
											</div>
					                      <input type="text" class="form-control pull-right" name="timegap" value="{$timegap}" id="start_time" style="width:250px;">
					                    </div>
				  					</div>
				  					<!--<button type="button" class="btn btn-default pull-right" id="daochu"><i class="fa fa-file-excel-o"></i>&nbsp;导出excel</button>-->
		                   		 	<div class="col-xs-1"><input class="btn btn-primary btn-info margin" type="submit" value="确定"></div>
	                   		 	</form>
                   		 	</div>
		  				</div>
		  			</div>
		  			<div class="box-body">
		  				<div class="row">
		  				    <div class="col-sm-2 col-xs-6">
		  				         <a href="javascript:;" onclick="opens(1)">查看商品浏览列表</a></br>
	                   		    <a href="javascript:;" onclick="opens(2)">查看店铺浏览列表</a></br>
		  				    </div>
							<div class="col-sm-2 col-xs-6" style="color:#005EA6;">
								平台总浏览数：<span>{$index_count}</span>
							</div>
							<div class="col-sm-2 col-xs-6" >
								日期平台总浏览数：<span>{$datas[0][value]}</span>
							</div>
				  			<div class="col-sm-2 col-xs-6" style="color:#005EA6;">
								店铺总浏览数：<span>{$store_count}</span>
							</div>
							<div class="col-sm-2 col-xs-6" >
								日期店铺总浏览数：<span>{$datas[2][value]}</span>
							</div>
				  			<div class="col-sm-2 col-xs-6" style="color:#005EA6;">
								商品总浏览数：<span>{$goods_count}</span>
							</div>
							<div class="col-sm-2 col-xs-6" >
								日期商品总浏览数：<span>{$datas[1][value]}</span>
							</div>
			  			</div>
		  			</div>
		  		</div>
		  	</div>
		  </div>
          <div class="row">
            <div class="col-md-12">
              <div class="box box-primary">
                <div class="box-header with-border">
                  <h3 class="box-title">浏览量走势</h3><span style="color: red;"></span>
                  <div class="box-tools"></div>
                  <div class="box-tools pull-right">
                    <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                    <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                  </div>
                </div>
                <div class="box-body">
              
                  <div class="chart">
                    	<div id="pie" style="height: 400px;"></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-sm-12">
       <!--     <div class="panel panel-default">-->
       <!--     	<div class="panel-heading">-->
       <!--             <h3 class="panel-title"><i class="fa fa-list"></i> 浏览表格概览</h3>-->
       <!--         </div>-->
       <!--         <div class="panel-body">-->
	      <!--      	<table id="list-table" class="table table-bordered table-striped">-->
			    <!--           <thead>-->
			    <!--               <tr>-->
			    <!--               	   <th>时间</th>-->
				   <!--                <th>订单数</th>-->
							<!--	   <th>下单人数</th>-->
				   <!--                <th>客单价</th>-->
				   <!--                <th>销售总额</th>-->
				   <!--                <if condition="session('role_id') eq 1">-->
				   <!--                <th>扣点比例</th>-->
				   <!--                </if>-->
							<!--	   <th>扣点收入</th>-->
			    <!--              	   <th>查看</th>-->
			    <!--               </tr>-->
			    <!--            </thead>-->
							<!--<tbody>-->
	      <!--                   <foreach name="list" item="vo" key="k" >-->
	      <!--                    <tr role="row" align="center">-->
	      <!--                    	 <td>{$vo.day}</td>-->
	      <!--                    	 <td>{$vo.order_num}</td>-->
							<!--	 <td>{$vo.users_num}</td>-->
	      <!--                       <td>{$vo.sign}</td>-->
			    <!--                 <td style="color: red;">￥{$vo.amount}</td>-->
			    <!--                 <if condition="session('role_id') eq 1">-->
			    <!--                 <td style="color: red;">{$vo.bili}%</td>-->
			    <!--                 </if>-->
							<!--	 <td style="color:green;">￥{$vo.kou_price}</td>-->
			    <!--                 <td><a href="{:U('Report/saleList',array('timegap'=>$vo['day'].' 00:00 - '.$vo['day'].' 23:59:59'))}" target="_blank">店铺销售排行</a></td>-->
			    <!--               </tr>-->
			    <!--              </foreach>-->
			    <!--            </tbody>-->
			    <!--    </table>-->
		     <!--   </div>-->
		     <!-- </div>-->
            </div>
          </div>
        </section>
</div>
<script src="__PUBLIC__/js/echart/echarts.min.js" type="text/javascript"></script>
<script src="__PUBLIC__/js/echart/macarons.js"></script>
<script src="__PUBLIC__/js/echart/china.js"></script>
<script src="__PUBLIC__/dist/js/app.js" type="text/javascript"></script>
<script type="text/javascript">
	function opens(type){
	    var time = $('#start_time').val()
	   // layer.msg(123, {icon: 2,time: 1000});
	   if(type == 1){
	       layer.open({
			  type: 2,
			  title: '商品浏览排行',
			  skin: 'layui-layer-rim', //加上边框
			  area: ['80%', '80%'], //宽高
			  content:"/index.php/Admin/Report/liulangoodsList/timegap/"+time
		});
	   }else{
	       
	       layer.open({
			  type: 2,
			  title: '商家浏览排行',
			  skin: 'layui-layer-rim', //加上边框
			  area: ['80%', '80%'], //宽高
			  content:"/index.php/Admin/Report/liulanstoreList/timegap/"+time
		});
	   }
	    
	}
    var data = '{$data}'
    var datas = JSON.parse(data);
    console.log(datas)
	var piechart = echarts.init(document.getElementById('pie'),'macarons');
	
	piechart.setOption({
		    title : {
		        text: '小程序访问数据',
		        subtext: '商品，店铺，小程序',
		        x:'center'
		    },
		    tooltip : {
		        trigger: 'item',
		        formatter: "{a} <br/>{b} : {c} ({d}%)"
		    },
		    legend: {
		        orient: 'vertical',
		        left: 'left',
		        data: ['首页','店铺','商品']
		    },
		    series : [
		        {
		            name: '访问来源',
		            type: 'pie',
		            radius : '55%',
		            center: ['50%', '60%'],
		            data:datas,
		            itemStyle: {
		                emphasis: {
		                    shadowBlur: 10,
		                    shadowOffsetX: 0,
		                    shadowColor: 'rgba(0, 0, 0, 0.5)'
		                }
		            }
		        }
		    ]
		});
	
	$(document).ready(function() {
		$('#start_time').daterangepicker({
			format:"YYYY-MM-DD HH:mm",
			singleDatePicker: false,
			showDropdowns: true,
			minDate:'2021-01-01 00:00',
			maxDate:'2030-01-01 00:00',
			startDate:'{:date("Y-m-d")} 00:00',
	        showWeekNumbers: true,
	        timePicker: true,
	        timePickerIncrement: 1,
	        timePicker12Hour: false,
	        ranges: {
	           '今天': [moment(), moment()],
	           '昨天': [moment().subtract('days', 1), moment().subtract('days', 1)],
	           '最近7天': [moment().subtract('days', 6), moment()],
	           '最近30天': [moment().subtract('days', 29), moment()],
	           '上一个月': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
	        },
	        opens: 'right',
	        buttonClasses: ['btn btn-default'],
	        applyClass: 'btn-small btn-primary',
	        cancelClass: 'btn-small',
		    locale : {
	            applyLabel : '确定',
	            cancelLabel : '取消',
	            fromLabel : '起始时间',
	            toLabel : '结束时间',
	            customRangeLabel : '自定义',
	            daysOfWeek : [ '日', '一', '二', '三', '四', '五', '六' ],
	            monthNames : [ '一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月' ],
	            firstDay : 1
	        }
		});
	});
	$("#daochu").click(function(){
		var start_time=$("#start_time").val();
		var fenbu_id=$("#fenbu_id").val();
		location.href="/index.php/Admin/Report/expor_index?timegap="+start_time+"&fenbu_id="+fenbu_id;
	})
</script>
</body>
</html>